<template>
  <view :style="{ height: statusbarH, backgroundColor: bg }" class="uni-status-bar">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'MuiStatusBar',
  props: {
    bg: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    statusbarH() {
      const systemInfo = uni.getSystemInfoSync()
      return `${systemInfo.statusBarHeight}px`
    }
  }
}
</script>

<style scoped>
.uni-status-bar {
  height: var(--status-bar-height);
}
</style>
